<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-05 14:38:57
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-07 16:26:43
 * @Description: 
-->
<template>
  <div class="layout-demo">
    <a-layout>
      <a-layout-header>
        <NavBar />
      </a-layout-header>
      <a-layout>
        <SideBar />
        <a-layout-content id="layout-content">
          <router-view />
        </a-layout-content>
        <a-back-top
          target-container="#layout-content"
          :visible-height="200"
          class="back-top"
        />
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import NavBar from "./NavBar.vue";
import SideBar from "./SideBar.vue";
</script>

<style lang="less" scoped>
@header-height: 60px;
@sider-width: 230px;

.layout-demo {
  height: 100vh;
  width: 100%;
  .back-top{
    position:absolute;
    bottom:40px;
    right: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
  }
}
.layout-demo :deep(.arco-layout-header) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-header) {
  height: @header-height;
  width: 100%;
}

.layout-demo :deep(.arco-layout-sider) {
  width: @sider-width;
  justify-content: left;
  text-align: left;
  height: calc(100vh - @header-height);
}

.layout-demo :deep(.arco-layout-content) {
  height: calc(100vh - @header-height);
  box-sizing: border-box;
  position: relative;
  background: var(--color-neutral-2);
  padding: 10px;
  color: var(--color-text-1);
  font-size: 16px;
  .article-content {
    background: var(--color-bg-1);
    border-radius: var(--border-radius-medium);
    box-sizing: border-box;
    padding: 20px;
    top: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
    position: relative;
    width: 80%;
    margin: 0 auto;
    line-height: 1.7rem;
    margin-bottom: 100px;
    transition: all .3s ease-out;
    h1.title {
      margin: 0 0 1.667rem;
      font-size: 2.667rem;
      font-weight: 600;
      line-height: 1.31;
      color: #252933;
    }
    pre {
      width: 90%;
      margin: 0 auto;
      border-radius: 10px;
      background: rgba(0, 0, 0, 1) !important;
    }
  }
  @media only screen and (max-width:748px)  {
    .article-content{
      width: 100%;
      padding: 10px;
    }
  }
}
</style>
